<template>
    <div>
        <el-dialog
            v-model="dialogSync"
            :width="width || '30%'"
            :before-close="close"
            align-center
            :show-close="false"
        >
            <!-- <span>This is a message</span> -->
          <template #header="{ close }">
                <div class="my-header">
                    <h4>{{ title }}</h4>
                    <close-small theme="filled" size="20" fill="#fff"  @click="close"/>
                </div>
            </template>
            <div class="content">
                <slot name="content"></slot>
            </div>
            <template #footer>
                <template v-if="isCustomFooter || false">
                    <slot name="footer" />
                </template>
                <template v-else>
                    <div class="dialog-footer">
                        <el-button type="primary" round color="#BC81FC" @click="onSureClick">
                        确认
                        </el-button>
                        <!-- <el-button  round color="#000000" style="color: #fff" @click="close">取消</el-button> -->
                     </div>
                </template>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import {CloseSmall} from '@icon-park/vue-next'
import {ref, watch} from 'vue'
const props = defineProps<{
    show: boolean,
    isCloseTip: boolean,
    title: string,
    width?: string | number,
    isCustomFooter?: boolean,
}>()

const dialogSync = ref<boolean>(false);

watch(() => props.show, () => {
    dialogSync.value = props.show
})

const emit = defineEmits(['onClose', 'onSureClick'])

const close = () => {
    dialogSync.value = false;
    emit('onClose')
}
const onSureClick = () => {
    dialogSync.value = false;
    emit('onSureClick')
}
</script>
<style lang="css" scoped>
.dialog{
    background: #25212B;
    border-radius: 20px;

}
:deep(.el-dialog) {
    background: #25212B;
    border-radius: 10px;
}
.my-header {
    color: #fff;
    font-size: 14px;
    font-weight: 600x;
    display: flex;
    justify-content: space-between;
}
.content {
    background: #000000;
    width: 100%;
    border: 2px solid #99717F;
    padding: 10px 20px;
    border-radius: 10px;
    min-height: 100px;
}
.dialog-footer {
    /* display: flex; */
    text-align: left;
}
</style>